<!--<?php
print <<<EOT
-->	    
    <link type="text/css" rel="js/galleryview.css" />
<!--    <script type="text/javascript" src="./js/jquery-ui-1.7.2.min.js"></script>
	<script src="./js/jquery.timers-1.2.js" type="text/javascript"></script>
	<script src="./js/jquery.galleryview-2.1.1.js" type="text/javascript"></script>-->
	<script type="text/javascript">
	var jsonImg = null;
	{$scriptImg}
	
	/*
	var num = 0;
	function loadImg()
	{
	    
	    for(j=0;j<jsonImg.data.length;j++)
	    {
	        var img=document.createElement("img")
	        $(img).attr({"id":"img"+j,"src":jsonImg.data[0].src})
	        var liw=document.createElement("li");       
            var spanw=document.createElement("span");
            $(liw).append(spanw).append(img).appendTo("#photos");  
	    
	    
	    }	  
	    	     
	    for(i=1;i<jsonImg.data.length;i++)
	    {
	        var img = new Image(); 
	        $(img).attr({"src":jsonImg.data[i].src,"alt":jsonImg.data[i].name,"class":"picture"});		        
	        $("#img"+i).attr({"src":jsonImg.data[i].src,"alt":jsonImg.data[i].name,"class":"picture"});		        
	                
//            var liw=document.createElement("li");       
//            var spanw=document.createElement("span");
//            $(liw).append(spanw).append(img).appendTo("#photos");  
               
	     }	    
	    sliderPicture();   
           
     
	    
	}

	function sliderPicture()
	{	
            $("#photos").galleryView({
               show_panels:true,
               show_filmstrip:true,
               panel_width:740,
               panel_height:300,
               frame_width:60,
               frame_height:50,
               pointer_size:8,
               pointer_size:8,
               pause_on_hover:true,
               filmstrip_position:'bottom',
               overlay_position:'bottom',
               nav_theme:'dark',
               transition_speed:500,
               transition_interval:2000,
               show_captions:false,
               complete_fun:'ClearLoading'
               })  
	
	}	
	$(document).ready(function(){	
	   loadImg(); 
	   
	})	
	
	function ClearLoading()
	{
	    $("#ldCenter").remove();
	}
	*/
    </script>
<script type="text/javascript" language="javascript">

var stopscroll = false;
var scrollSpeed = 1500; //speed 
var scrollLength = 0;
var currPos = 0;// current postion
var shortScroll = false; //when all image width shorter the scrollwidth this value equal true;
var liSpan = 4;
var showImgNum = 9;

$(document).ready(function(){
scrollLength = $("#ulImgs > li:first").width();
$("#scrollContainer").mouseover(function(){stopscroll=true;clearTimeout(t);});
$("#scrollContainer").mouseout(function(){stopscroll=false;clearTimeout(t);SetScroll(currPos); });
$("#imgPre").click(function(){stopscroll=false;clearTimeout(t);		
		if(currPos<$("#ulImgs").find("img").size())
		{  
		 scrollLeft(currPos+1);
		}

});
$("#imgNext").click(function(){stopscroll=false;clearTimeout(t);scrollRight(1);});

init(); 
changesize();

});
 
//Init
function init(){

    $("#ulImgs").find("img").each(function(i){ 
        var img = $(this);
        $(img).hover(function(){this.className="";},function(){this.className="imgOpacity";});
        $(this).click(function()
		{		   
            clearTimeout(t);			
            stopscroll = false;
            scrollLeft($(this).parent("li").prevAll().size()-2);			
			stopscroll = true;
            //SetScroll();		
        });
        $(this).addClass("imgOpacity");
    });  
	//从头开始
   $("#ulImgs").find("img").eq(0).removeClass("imgOpacity");

    for(i=0;i<jsonImg.data.length;i++)
    {
        var image1=new Image();
        image1.src =jsonImg.data[i].src;
        $(image1).hover(function(){this.className="";},function(){this.className="imgOpacity";});
        $(image1).click(function(){
            clearTimeout(t);
            stopscroll = false;		
            scrollLeft($(this).parent("li").prevAll().size()-2);			
			stopscroll = true;			
            //SetScroll();
        });
        $(image1).addClass("imgOpacity");
		//插入剩下部分        
        if(i>=showImgNum)
        {
            var li = document.createElement("li");
            li.appendChild(image1);            
            $("#ulImgs").append(li);
        }
        
    } 
	//如果不够数
    if( jsonImg.data.length <= showImgNum)
    {
         shortScroll = true;
         $("#scrollContent").css("width",jsonImg.data.length * (scrollLength+liSpan+2) +"px");
         $("#scrollContainer").css("width",jsonImg.data.length * (scrollLength+liSpan+2)+40+"px");
    } 
    SetScroll(1); 
}

function SetScroll(frm)
{
      
	   t = setInterval(function(){scrollLeftSelf(frm)}, scrollSpeed);
	   
	    	
}

//edit by martin 2011 3 30
function stopToView(i)
{
 //alert(i)   
// if(stopscroll == true || i<=0 ) return; //stop scroll 
	if(stopscroll == true || i<0 ) return; //stop scroll 
    if(!shortScroll)
    {
        $("#ulImgs>li:eq(2)>img").addClass("imgOpacity"); 
      for(k=0;k<i;k++)
        {  
            $("#ulImgs>li:first").animate({"width":0},500/i,null,funScrollLeftCallBack); 
        }     
        $("#img_show").attr("src",$("#ulImgs>li:eq("+(i+2)+")>img").attr("src"));
         changesize();		 
    }
    else
    {	
	  
	   $("#ulImgs").find("img:eq("+currPos+")").addClass("imgOpacity");  
		currPos = i;
        if(currPos >= jsonImg.data.length) currPos =0;        
        $("#ulImgs").find("img:eq("+currPos+")").removeClass("imgOpacity");
        $("#UpImg").animate({"left":currPos*(scrollLength+4)+52},500);
        $("#img_show").attr("src",jsonImg.data[currPos].src);
        changesize();	
	  
	}

}

function scrollLeft(i){  
   // if(stopscroll == true || i<=0 ) return; //stop scroll 
	if(stopscroll == true || i<0 ) return; //stop scroll 
    if(!shortScroll)
    {
	 $("#ulImgs").find("img:eq("+currPos+")").addClass("imgOpacity");
	  currPos = i;
	   if(currPos >= jsonImg.data.length) currPos =0;    
    
    /*   $("#ulImgs>li:eq(2)>img").addClass("imgOpacity"); 
        for(k=0;k<i;k++)
        {  
            $("#ulImgs>li:first").animate({"width":0},500/i,null,funScrollLeftCallBack); 
        }      
        $("#img_show").attr("src",$("#ulImgs>li:eq("+(i+2)+")>img").attr("src"));
		*/	
		$("#img_show").attr("src",$("#ulImgs>li:eq("+(i+2)+")>img").attr("src"));
		 $("#ulImgs").find("img:eq("+currPos+")").removeClass("imgOpacity");
		 $("#UpImg").animate({"left":currPos*(scrollLength+4)+52},500);
		 //$("#img_show").attr("src",jsonImg.data[currPos].src);
		 currPos=1;
         changesize();	 		
    }
    else
    {	    
	 
        $("#ulImgs").find("img:eq("+currPos+")").addClass("imgOpacity");        
        //if(i==1)  currPos+=i;
       // else currPos = i;     
		currPos = i;
        if(currPos >= jsonImg.data.length) currPos =0;        
        $("#ulImgs").find("img:eq("+currPos+")").removeClass("imgOpacity");
        $("#UpImg").animate({"left":currPos*(scrollLength+4)+52},500);
        $("#img_show").attr("src",jsonImg.data[currPos].src);
        changesize();	
    }	
}

function scrollLeftSelf(i)
{
   
  
    if(stopscroll == true || i<0 ) return; //stop scroll 
    if(!shortScroll)
    {
	   $("#UpImg").animate({"left":0*(scrollLength+4)+52},500);	  
        $("#ulImgs>li:eq(2)>img").addClass("imgOpacity"); 
        for(k=0;k<i;k++)
        {  
            $("#ulImgs>li:first").animate({"width":0},500/i,null,funScrollLeftCallBack); 
        }      
        $("#img_show").attr("src",$("#ulImgs>li:eq("+(i+2)+")>img").attr("src"));
         changesize();		
    }
    else
    {	
	   //currPos=currPos+1;   	
	  //$("#INp").val(currPos);	
        $("#ulImgs").find("img:eq("+currPos+")").addClass("imgOpacity"); 	
		//currPos=0; 
		currPos++;  
		//alert(currPos)
        if(currPos >= jsonImg.data.length) currPos =0;        
        $("#ulImgs").find("img:eq("+currPos+")").removeClass("imgOpacity");
        $("#UpImg").animate({"left":currPos*(scrollLength+4)+52},500);
        $("#img_show").attr("src",jsonImg.data[currPos].src);
        changesize();	
    }	

}



function funScrollLeftCallBack()
{
    $("#ulImgs>li:eq(2)").insertAfter($("#ulImgs>li:last"));
    $("#ulImgs>li:first").css("width",scrollLength);
    $("#ulImgs>li:eq(2)>img").removeClass("imgOpacity");
}

function scrollRight(i)
{
    if(stopscroll == true || i<=0 ) return; //stop scroll 
    if(!shortScroll)
    {
        $("#ulImgs>li:eq(2)>img").addClass("imgOpacity");         
        $("#ulImgs>li:last").insertAfter($("#ulImgs>li:eq(1)"));
        $("#ulImgs>li:eq(1)").css("width",0);
     
        $("#ulImgs>li:eq(1)").animate({"width":scrollLength},500/i); 
            
        $("#img_show").attr("src",$("#ulImgs>li:eq(2)>img").attr("src"));
        $("#ulImgs>li:eq(2)>img").removeClass("imgOpacity");
         changesize();
    }
    else
    {
        $("#ulImgs").find("img:eq("+currPos+")").addClass("imgOpacity"); 
       // if(i==0)  currPos-=i;
       //else currPos = i;
	           currPos--;
        if(currPos < 0 ) currPos = jsonImg.data.length-1;
        
        $("#ulImgs").find("img:eq("+currPos+")").removeClass("imgOpacity");
        $("#UpImg").animate({"left":currPos*(scrollLength+4)+52},500);
        $("#img_show").attr("src",jsonImg.data[currPos].src);
        changesize();
    }
}

function changesize()
{
 var h= $("#img_show").height();
 var w=$("#img_show").width();
 var bl=h/w
 if(bl > 1)
 {
  
   $("#img_show").height(370);
  
  
 }
 else
 {
  $("#img_show").height(370*bl);
 
 }

}

</script>
    
<style type="text/css">
#scrollContent img{
width:60px;
height:50px;
cursor:pointer;
}
#scrollContainer{width:730px;height:60px; margin:0 auto; position:relative;}
#scrollContent{
    overflow:hidden;
    text-align:left;
    width:686px;
    height:58px;
    position:absolute;
    left:20px;top:0px;
}
#left-prev{width:20px;height:58px;position: absolute; z-index:1000; left:0; top:0;}
#right-next{width:20px;height:58px;position: absolute;z-index:1000; right:0; top:0;}
#scrollContent ul{
     float:left; list-style:none; list-style-type:none; width:2000px; height:80px;padding:0px; margin:0px; position:absolute; display:block;left:-128px;
}
#scrollContent ul li{
    float:left; list-style:none; list-style-type:none; width:64; height:54px; margin:2px; padding:0px;
}
#UpImg{width:8px; height:8px;position:absolute; top:-18px; left:52px }
.imgOpacity
{
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    opacity:0.3;
}
</style>    
    
 <div class="main_R" >    
   <div id="showbox" style="position:relative; z-index:1; overflow:hidden; width:745px;float:left;">
    <div id="bigbox">  
 <div class="gallery" id="photos" >
  <div style="width: 740px;height:385px;display:block; text-align:center; margin:0 auto 20px;"><img id="img_show" src="{$aryPhoto[0]['pic']}" ></div>
<div id="scrollContainer">
<div id="UpImg">
   <div class="pointer" style=" width: 0px; font-size: 0px; line-height: 0%; border-width: 8px; border-style: solid; border-top: 8px solid transparent; border-right: 8px solid transparent; border-left: 8px solid transparent;"></div>
</div>
<div id="left-prev">
   <img style="margin-top:20px;cursor: pointer;float:left;margin-right:10px;" src="js/themes/dark/prev.gif" class="nav-prev" id="imgPre"/>
</div>


<div id="scrollContent" >
<ul id="ulImgs">
<li>&nbsp;</li>
<li>&nbsp;</li>
<!--
EOT;
foreach($aryPhoto as $v)
{
print <<<EOT
-->
<li><img src="{$v['pic']}" alt="{$v['name']}"  /></li>
<!--
EOT;
}
print <<<EOT
-->
</ul>
</div>
<div id="right-next">
   <img style="margin-top:20px;cursor: pointer;float:right;" src="js/themes/dark/next.gif" class="nav-prev" id="imgNext">
</div>
</div>
</div> 
       </div>    
   
   
            </div>  
      </div>    
 	</div> 
	<!--<input type="text" id="INp"  />-->
        
<!--
EOT;
?>-->